<template>
  <div v-loading="loading">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="basic">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="会议主题">{{ meeting.title }}</el-descriptions-item>
          <el-descriptions-item label="会议室">{{ meeting.roomName }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ meeting.startTime | formatDateTime }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ meeting.endTime | formatDateTime }}</el-descriptions-item>
          <el-descriptions-item label="组织者">{{ meeting.organizerName }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ meeting.departmentName }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getMeetingStatusType(meeting.status)">
              {{ getMeetingStatusText(meeting.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ meeting.createTime | formatDateTime }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="会议议程">
            <div style="white-space: pre-line">{{ meeting.agenda }}</div>
          </el-descriptions-item>
        </el-descriptions>
        
        <div class="section-title">参会人员</div>
        <el-table :data="meeting.participants" border style="width: 100%">
          <el-table-column prop="userName" label="姓名" width="180"></el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template slot-scope="scope">
              <el-tag :type="getParticipantStatusType(scope.row.status)">
                {{ getParticipantStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      
      <el-tab-pane label="会议纪要" name="minutes">
        <meeting-minutes :meeting-id="meetingId" :meeting-status="meeting.status" />
      </el-tab-pane>
      
      <el-tab-pane label="会议附件" name="attachments">
        <meeting-attachments :meeting-id="meetingId" :meeting-status="meeting.status" />
      </el-tab-pane>
      
      <el-tab-pane label="会议反馈" name="feedback" v-if="meeting.status === 2">
        <meeting-feedback :meeting-id="meetingId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getMeeting } from '@/api/meeting'
import MeetingMinutes from './MeetingMinutes'
import MeetingAttachments from './MeetingAttachments'
import MeetingFeedback from './MeetingFeedback'

export default {
  name: 'MeetingDetail',
  components: {
    MeetingMinutes,
    MeetingAttachments,
    MeetingFeedback
  },
  props: {
    meetingId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      activeTab: 'basic',
      meeting: {
        title: '',
        roomName: '',
        startTime: '',
        endTime: '',
        organizerName: '',
        departmentName: '',
        status: 0,
        createTime: '',
        agenda: '',
        participants: []
      }
    }
  },
  created() {
    this.getMeetingDetail()
  },
  methods: {
    getMeetingDetail() {
      this.loading = true
      getMeeting(this.meetingId).then(response => {
        this.meeting = response.data
        this.loading = false
      })
    },
    // 获取会议状态文本
    getMeetingStatusText(status) {
      const statusMap = {
        0: '未开始',
        1: '进行中',
        2: '已结束',
        3: '已取消'
      }
      return statusMap[status] || '未知'
    },
    // 获取会议状态类型
    getMeetingStatusType(status) {
      const typeMap = {
        0: 'primary',
        1: 'success',
        2: 'info',
        3: 'danger'
      }
      return typeMap[status] || ''
    },
    // 获取参与人员状态文本
    getParticipantStatusText(status) {
      const statusMap = {
        0: '待确认',
        1: '已确认',
        2: '已拒绝'
      }
      return statusMap[status] || '未知'
    },
    // 获取参与人员状态类型
    getParticipantStatusType(status) {
      const typeMap = {
        0: 'info',
        1: 'success',
        2: 'danger'
      }
      return typeMap[status] || ''
    }
  }
}
</script>

<style scoped>
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 10px 0;
}
</style> 